<template>
  <div class="card card-custom gutter-b">
    <!--begin::Header-->
    <div class="card-header border-0 pt-5">
      <h3 class="card-title align-items-start flex-column">
        <span class="card-label font-weight-bolder text-dark"
          >Team Members</span
        >
        <span class="text-muted mt-3 font-weight-bold font-size-sm"
          >With 4 main members</span
        >
      </h3>
      <div class="card-toolbar">
        <ul class="nav nav-pills nav-pills-sm nav-dark-75">
          <li class="nav-item">
            <a
              class="nav-link py-2 px-4"
              :class="{ active: this.show === 'day' }"
              data-toggle="tab"
              href="#kt_tab_pane_3_3"
              @click="show = 'day'"
              >CSU</a
            >
          </li>
        </ul>
      </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body pt-2 pb-0">
      <!--begin::Table-->
      <div class="table-responsive">
        <table class="table table-borderless table-vertical-center">
          <thead>
            <tr>
              <th class="p-0" style="width: 50px"></th>
              <th class="p-0" style="min-width: 150px"></th>
              <th class="p-0" style="min-width: 120px"></th>
              <th class="p-0" style="min-width: 70px"></th>
              <th class="p-0" style="min-width: 70px"></th>
              <th class="p-0" style="min-width: 50px"></th>
            </tr>
          </thead>
          <tbody>
            <template >
              <tr v-for="(item, i) in dataToShow" v-bind:key="i">
                <td class="pl-0">
                  <div class="symbol symbol-50 symbol-light mr-2 mt-2">
                    <span class="symbol-label">
                      <img :src="item.img" class="h-75 align-self-end" alt="" />
                    </span>
                  </div>
                </td>
                <td class="pl-0">
                  <a
                    href="#"
                    class="text-dark font-weight-bolder text-hover-primary mb-1 font-size-lg"
                    >{{ item.name }}</a
                  >
                  <span class="text-muted font-weight-bold d-block">{{
                    item.desc
                  }}</span>
                </td>
                <td></td>
                <td class="text-right">
                  <span class="text-muted font-weight-bold d-block font-size-sm"
                    >Level</span
                  >
                  <span
                    class="text-dark-75 font-weight-bolder d-block font-size-lg"
                    >{{ item.paid }}</span
                  >
                </td>
                <td class="text-right">
                  <span class="text-muted font-weight-bold d-block font-size-sm"
                    >SAN值</span
                  >
                  <span
                    class="font-weight-bolder"
                    v-bind:class="`text-${item.class}`"
                    >{{ item.percentage }}</span
                  >
                </td>
                <td class="text-right pr-0">
                  <a href="#" class="btn btn-icon btn-light btn-sm">
                    <span class="svg-icon svg-icon-md svg-icon-success">
                      <!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Arrow-right.svg-->
                      <inline-svg
                        src="media/svg/icons/Navigation/Arrow-right.svg"
                      />
                      <!--end::Svg Icon-->
                    </span>
                  </a>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <!--end::Table-->
    </div>
    <!--end::Body-->
  </div>
</template>

<script>
export default {
  name: "widget-9",
  data() {
    return {
      show: "day",
      day: [
        {
          img: "media/svg/avatars/001-boy.svg",
          name: "王**",
          desc: "组长，面向对象、控制流图、信息流、代码行前端",
          paid: "⭐⭐⭐⭐⭐",
          percentage: "7%QAQ",
          class: "danger"
        },
        {
          img: "media/svg/avatars/003-girl-1.svg",
          name: "董*",
          desc: "功能点、用例图后端",
          paid: "⭐⭐⭐⭐⭐",
          percentage: "52%",
          class: "primary"
        },
        {
          img: "media/svg/avatars/034-boy-14.svg",
          name: "王**",
          desc: "面向对象、控制流图、信息流、代码行后端",
          paid: "⭐⭐⭐⭐⭐",
          percentage: "20%",
          class: "warning"
        },
        {
          img: "media/svg/avatars/004-boy-1.svg",
          name: "周**",
          desc: "功能点、用例图前端",
          paid: "⭐⭐⭐⭐⭐",
          percentage: "33%",
          class: "success"
        },
      ]
    };
  },
  computed: {
    dataToShow() {
      if (this.show === "day") return this.day;
      return this.day;
    }
  }
};
</script>
